<template>
  <view class="sampleorderlist">
   <!-- <view class="input">
    	<uni-easyinput prefixIcon="search"  trim="all" v-model="keyword" :styles="styles" :placeholderStyle="placeholderStyle"></uni-easyinput>
		<button @click="search">搜索</button>
    </view> -->
    
    <!-- stripe type="selection" 开启多选 -->
    <uni-table ref="table" type="" stripe :loading="loading" border emptyText="暂无更多数据" filter-type="search">
        <uni-tr v-for="(item, index) in card_arr" :key="index">
			<uni-td width="100%" align="left" class="td-class">
				<div>
					<view>
						<text>单号：{{ poorder.FBillNo }}</text>
					</view>
					<view>
						<text>物料名：{{ item.FName }}</text>
					</view>
					<view>
						<text>数量：{{ item.FQty }}</text>
						<text>剩余数量：{{ item.FQtySY }}</text>
					</view>
					<view>
						<text>编码：{{ item.FNumber }}</text>
						<text>规格：{{ item.FModel }}</text>
						<text>单位：{{ item.FUnit_Name }}</text>
					</view>
				</div>
			</uni-td>
        </uni-tr>
    </uni-table>
    <!-- <view class="uni-pagination-box">
		<uni-pagination show-icon :page-size="pageSize" :current="currentPage"
        :total="total" @change="change" />
	</view> -->
  </view>
</template>

<script>
// 引入uni-ui组件
import {
  uniPagination,
  uniIcons,
  uniCard,
  uniTable,
  uniTr,
  uniTh,
  uniTd,
  uniEasyinput
} from "@dcloudio/uni-ui"

export default {
  data() {
    return {
      card_arr: [],//当前页码的表格数据
      pageSize: 15,// 每页数据量
      currentPage: 1,// 当前页
      total: 0,// 数据总量
      loading: false,
      item: '',
      id: '',
	  barcode:'',
	  placeholderStyle:'font-size:16px;',
	  styles:{
	  	borderColor: '#999'
	  },
	  keyword:'',
	  where:' 1=1 ',
	  poorder:[]
    }
  },
  components: {
    uniPagination,
    uniIcons, //uni-ui的icons组件
    uniCard, //uni-ui的卡片组件
    uniTable,
    uniTr,
    uniTh,
    uniTd,
	uniEasyinput
  },
  methods: {
    radioChange(e) {
      var value = Number(e.detail.value);
      this.id = this.card_arr[value].id
    },
    // 点击关闭的事件回调
    close() {
      uni.navigateBack({})
    },
	// 搜索
	search() {
		this.getlist();
	},
    //获取列表
    getlist(poorder) {
		this.poorder = poorder;
		uni.showLoading();
		if(poorder!=undefined){
			this.where = "FInterID = "+poorder.FInterID
			this.$Db.queryCount('poorder_item',this.where).then(res => {
				this.total = res[0].num;//获得总页数
			})
			this.$Db.queryDataList('poorder_item',this.currentPage,this.pageSize,this.where).then(res => {
				this.card_arr = res;
				console.log(res)
				uni.hideLoading();
			})
		}
    },
    change(e) {
      this.currentPage = e.current
      this.getlist()
    }
  },
  mounted(e) {
    this.getlist()
  },
  onLoad(e) {
	  /* 监听采购列表明细 */
	  uni.$on("getPoItem", (value) => {
	  	this.getlist(value)
	  })
	
  }
}
</script>

<style lang="less">
	page{
		font-size: 18px;
	}
	.input{
		margin:20upx 10upx ;
		width: 100%;
		display: flex;
		justify-content: space-between;
		input{
			padding-left:25upx;
			line-height: 80upx;
			height: 80upx;
			border: 1px solid #e5e5e5;
			border-radius: 10upx;
		}
		button{
			margin: 0 20upx;
			width: 160upx;
			background-color: #18bc9c;
			color: #fff;
			height: 94upx;
			line-height: 94upx;
			&:active {
				background: #128F76;
			}
		}
	}
	.td-class{
		text{
			font-size: 16px;
			color: #000;
		}
		view{
			display: flex;
			justify-content: space-between;
		}
		div{
			border-bottom: 1px #128F76 solid;
		}
		&:active {
			background: #18bc9c;
		}
	}
	
.sampleorderlist {
  // margin-top: 200rpx;
  padding: 0 20rpx;

  >.close_btn,
  >.save_btn {
    display: inline-block;
    padding: 16rpx 20rpx;
    margin: 30rpx 0;
    border-radius: 6rpx;
    color: #fff;
  }

  >.close_btn {
    // margin-left: 20rpx;
    background: #444c69;

    &:active {
      background: #2C3E50;
    }
  }

  >.save_btn {
    margin-left: 20rpx;
    background: #18bc9c;

    >.uni-icons {
      //uni-ui的icon图标样式
      margin-right: 5rpx;
      font-weight: bolder;
    }

    &:active {
      background: #128F76;
    }
  }

  >.btn {
    display: inline-block;
    padding: 16rpx 20rpx;
    margin-top: 30rpx;
    margin-left: 10rpx;
    border-radius: 6rpx;
    font-size: 26rpx;
    color: #fff;

    >.uni-icons {
      //uni-ui的icon图标样式
      margin-right: 5rpx;
      font-weight: bolder;
    }
  }

  >.add {
    background: #18bc9c;

    &:active {
      background: #128F76;
    }
  }

  >.editor {
    background: #999;
  }

  >.delete {
    background: #F75444;

    &:active {
      background: #FA9086;
    }
  }

  >.card_list {
    padding: 0 10rpx;
    padding-top: 30rpx;

    >.uni-card {
      //uni-ui卡片组件的类名
      margin: 30rpx 10rpx !important;
      position: relative;

      .ul {
        >.li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;

          >.title {
            width: 98px;
          }

          >.value {
            min-height: 68rpx;
            width: 68%;
            padding-left: 20rpx;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            line-height: 68rpx;
            word-break: break-word;
            padding-right: 5px;
          }

          >.audit_status_1 {
            color: #18bc9c;
            font-weight: bold;
          }

          >.audit_status_2 {
            color: #aaa;
            font-weight: bold;
          }
        }
      }
    }

    >.empty {
      margin-top: 40rpx;
      color: #999;
      text-align: center;
      font-size: 36rpx;
    }
  }
}
</style>